import { StyleSheet } from "react-native";
import { Text, View } from "../components/Themed";
import vars from "../styles/vars";
import SummaryDetails from "../components/SummaryDetails";
import { AnimatedCircularProgress } from "react-native-circular-progress";
import { Button, Dialog } from "react-native-paper";
import React from "react";

export default function ModalBudgetScreen() {
  const [visible, setVisible] = React.useState(false);

  return (
    <View style={styles.container}>
      <>
        <View style={styles.gather}>
          <AnimatedCircularProgress
            style={{ flex: 1 }}
            backgroundColor={vars["green-3"]}
            size={50}
            width={5}
            fill={0}
          />
          <SummaryDetails
            containerStyle={styles.gatherItem}
            titleStyle={styles.title}
            title={"剩余预算"}
          />
          <SummaryDetails
            containerStyle={styles.gatherItem}
            titleStyle={styles.title}
            title={"总预算"}
          />
        </View>
        <View style={styles.gather}>
          <SummaryDetails
            containerStyle={styles.gatherItem}
            titleStyle={styles.title}
            title={"已支出"}
            text={100}
          />
          <SummaryDetails
            containerStyle={styles.gatherItem}
            titleStyle={styles.title}
            title={"日均消费"}
          />
          <SummaryDetails
            containerStyle={styles.gatherItem}
            titleStyle={styles.title}
            title={"剩余日预算"}
          />
        </View>
        <Button
          icon={"bookmark-plus-outline"}
          color={vars["light-1"]}
          style={{
            width: "60%",
            left: "15%",
            margin: 15,
            backgroundColor: vars["green-3"],
          }}
          onPress={() => setVisible(true)}>
          添加分类预算
        </Button>
      </>
      <View>
        <Modal visible={visible} onCancel={() => setVisible(false)} />
      </View>
    </View>
  );
}

interface ModalProps {
  visible: boolean;
  onClose?: () => void;
  onCancel?: () => void;
}

function Modal(props: ModalProps) {
  const { visible, onCancel } = props;

  return (
    <Dialog visible={visible}>
      <Dialog.Title>分类选择</Dialog.Title>
      <Dialog.Content>
        <Text>111</Text>
      </Dialog.Content>
      <Dialog.Actions>
        <Button>显示隐藏分类</Button>
        <Button onPress={onCancel}>取消</Button>
        <Button>确定</Button>
      </Dialog.Actions>
    </Dialog>
  );
}

const styles = StyleSheet.create({
  container: {},
  gather: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    margin: 15,
  },
  gatherItem: {
    flex: 2,
    alignItems: "center",
  },
  title: {},
});
